<template>
    <div class="search-bar">
        <div class="body">
            <div class="input-bar" @click="toSearchPage">搜索</div>
            <!-- <div class="btn" @click="onSearch">搜索</div> -->
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {};
    },

    methods: {
        onSearch() {
            this.$emit("search");
        },
        toSearchPage() {
            this.$router.push({
                path: "/search/index"
            });
        }
    }
};
</script>


<style lang="less" scoped>
.search-bar {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;

    .body {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .input-bar {
            width: 100%;
            background: #555;
            height: 80px;
            box-sizing: border-box;
            border-radius: 40px;
            padding: 20px 40px;
            text-align: center;

            input {
                width: 100%;
                height: 100%;
            }
            input::placeholder {
                color: #999;
            }
        }

        .btn {
            flex: 0 0 auto;
            color: #fff;
        }
    }
}
</style>